<template>
  <div>
    
    <el-form :inline="true" :model="query">
      <!-- 关键字搜索 -->
      <el-form-item>
        <el-input 
        v-model="query.keyWord"
        placeholder="关键字" 
        :clearable="true">
        </el-input>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="loadArea"><i class="el-icon-search"></i></el-button>     
        <el-button type="success" @click="(dialog.addshow=true)">新建</el-button>
        <el-button type="success" @click="exportExcel">导出数据</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
                   class="clearfix"
                   action="http://localhost:9000/area/importExcel"
                   name="excel"
                   :on-progress="onExcelProgress"
                   :on-success="handleExcelSuccess"                   
                   accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                   multiple 
                   :limit="1"
                   :headers="upload.headerObj">
                <el-button  type="primary">数据导入</el-button>
               </el-upload>
      </el-form-item>
    </el-form>
    <!-- 数据展示 -->
    <el-table :data="areaList" border style="width: 100%">
      <el-table-column prop="areaId" label="区域编号" width="180"  ></el-table-column>
      <el-table-column prop="areaName" label="区域名称" width="180"></el-table-column>

      <el-table-column label="区域图片" width="130">
                <template slot-scope="scope"> 
                  <el-link @click="downLoad(scope.row.backup1)" target="_blank">                  
                    <img id="backup1" :src="scope.row.backup1"  />   
                  </el-link>                                  
                </template>

      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope"  >
          <el-button size="mini" @click="updateshow(scope.row.areaId)">编辑</el-button>
          <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.areaId)">
            <el-button
            slot="reference"
            size="mini"
            type="danger"           
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
     
      <el-table-column prop="areaId" label="查看区域详情"  width="900" >
      <!-- 循环展示所有区域中所有人员的基本信息 -->
        <template slot-scope="scope"  >
          <el-collapse  @change="handleChange"  >
            <el-collapse-item   title="人员列表" name=areaId >
              <el-descriptions class="margin-top" title="" :column="1"  border>
                <el-descriptions-item >
                  <template slot="label">
                    <i class="el-icon-user"></i>
                     用户类型
                  </template>
                  <span>
                    详情
                  </span>
                </el-descriptions-item>
                <el-descriptions-item v-for="item in roleList" :key="item">
                  
                  <template slot="label">
                    {{item.roleName}}:
                    <span v-for="item3 in areaCount" :key="item3">
                      <span v-if="(item3.areaId==scope.row.areaId&&item3.roleId==item.roleId)">
                        {{item3.count}}人
                      </span>
                    </span>
                  </template>
                  <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item  >
                      <el-descriptions  :column="1" >
                        <el-descriptions-item label="姓名">
                          <span v-for="item2 in areaUser" :key="item2">
                            <span v-if="(item2.areaId==scope.row.areaId&&item2.roleId==item.roleId)">
                              {{item2.userName}}、
                            </span>
                          </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="性别">
                          <span v-for="item2 in areaUser" :key="item2">
                            <span v-if="(item2.areaId==scope.row.areaId&&item2.roleId==item.roleId)">
                              {{item2.userSex}}、
                            </span>
                          </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="手机号">  
                          <span v-for="item2 in areaUser" :key="item2">
                            <span v-if="(item2.areaId==scope.row.areaId&&item2.roleId==item.roleId)">
                              {{item2.userTel}}、
                            </span>
                          </span>

                          
                      </el-descriptions-item>
                        <el-descriptions-item label="邮箱">
                          <span v-for="item2 in areaUser" :key="item2">
                            <span v-if="(item2.areaId==scope.row.areaId&&item2.roleId==item.roleId)">
                              {{item2.userMail}}、
                            </span>
                          </span>
                        </el-descriptions-item>

                      </el-descriptions>
                    </el-collapse-item>
                  </el-collapse>               
                </el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>

          <el-collapse  @change="handleChange"  >
            
            <el-collapse-item   title="灯杆列表" name=areaId >
              <el-descriptions class="margin-top" title="" :column="1"  border>
                <el-descriptions-item >
              
              
                  
                  
                  

                  <template slot="label">
                    <i class="el-icon-table-lamp"></i>
                     灯杆编号
                  </template>
                  <span>
                    设备信息
                  </span>
                </el-descriptions-item>
                <el-descriptions-item v-for="item5 in sele" :key="item5">
                  <template slot="label">
                      <span v-if="(item5.areaId==scope.row.areaId)">
                        {{item5.lpId}}
                      </span>
                  </template>
                  
                </el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>

        </template>
      </el-table-column>
    </el-table>

    <!-- 新增模态框 -->
    <el-dialog title="添加区域" :visible.sync="dialog.addshow" width="30%">
      <el-form ref="addForm" :model="addForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="区域名称" prop="areaName">
              <el-input v-model="addForm.areaName"></el-input>
            </el-form-item>
            <el-form-item label="区域图片">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/area/upload"
                name="file"
                :headers="upload.headerObj"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addshow = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改模态框 -->
    <el-dialog title="修改区域" :visible.sync="dialog.updateshow" width="30%">
      <el-form ref="updateForm" :model="updateForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="区域名称" prop="areaName">
              <el-input v-model="updateForm.areaName"></el-input>
            </el-form-item>
            <el-form-item label="区域图片">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9000/area/upload"
                name="file"
                :headers="upload.headerObj"
                :show-file-list="false"
                :on-success="updateUpload"
                :before-upload="beforeUpload"
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="updateArea()">确 定</el-button>
      </span>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    <router-view></router-view>

  </div>
</template>
<script>
  export default {
    data() {
      return {

        count:{},
        areaLightCountVos:{},
        lights:{},
        facilityNames:{},
        lightPoles:{},
        areaList: {},

        imageUrl: "",
        queryArea:{},
        upload: {
        headerObj: {
          //Spring security时需要传递token，否则不需要该配置
          Authorization: sessionStorage.getItem("authorization"),
        },
      },

        areaList: [],
        sele:{},
        roleList:{},
        areaUser:{},
        areaCount:{},
        addForm:{},
        updateForm:{},
        dialog:{
          addshow:false,
          updateshow:false
        },
        pageInfo: {       
          pageSizes:[5, 10, 15, 20],        
          total: 0,
        },
        query:{
          currentPage: 1,
          pageSize: 5,
          keyWord:"",
        },
        
       }
    },
    methods:{

      loadArea(){
        this.$axios.post("/area/selectAll",this.query)
        .then((res)=>{
          this.areaList = res.data.data.areaList;
          this.areaUser=res.data.data.areaUser;
          this.roleList=res.data.data.roleList;
          this.pageInfo.total = res.data.data.total;
          this.areaCount=res.data.data.areaCount;
          this.sele=res.data.data.sele;
        });

      },  
      handleExcelSuccess(res,result) {
                this.$message.success("导入成功");
                if (result.response.success) {
                    this.load();
                }
            },
            // 上传中
            onExcelProgress(){

            },


      exportExcel() {      
      this.$axios
        .post("area/exportExcel", this.query,{responseType: 'blob'})
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom)
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
       downLoad(backup1) {
      let pic = backup1.substr(backup1.lastIndexOf("/") + 1);
      this.$axios
        .get("/area/downLoadFile", {
          params: { filename: pic },
          responseType: "blob",
        })
        .then((res) => {
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", pic); //指定下载后的文件名，防跳转
          document.body.appendChild(link);
          link.click();
          // 释放内存
          window.URL.revokeObjectURL(link.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },


      handleSuccess(res, file) {
        this.$message.success("导入成功");
      if (res.code == 200) {
        this.imageUrl = res.message;
        this.addForm.backup1 = res.message; //将返回的文件储存路径赋值picture字段
      }
               
                if (result.response.success) {
                    this.loadArea();
                }
              },
            
          

          
    
    updateUpload(res){
      if (res.code == 200) {
        this.imageUrl = res.message;
        this.updateForm.backup1 = res.message; //将返回的文件储存路径赋值picture字段
      }

    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    
      

      updateArea(){
        this.$axios.put("/area",this.updateForm)
        .then((res)=>{
          if(res.data.code==200){
            this.dialog.updateshow=false;
            this.updateForm="";
            this.loadArea();
            this.$message.success("修改成功");

          }else{
            this.$message.error("修改失败");
          }
        });
      },
      updateshow(areaId){
        this.$axios.get("/area/"+areaId)
        .then((res)=>{
          if(res.data.code==200){
            this.updateForm=res.data.data.area;
            this.dialog.updateshow=true;
          }else{
            this.$message.error("展示错误");
          }
            
          
        });
      },
      handleDelete(areaId){
        this.$axios.delete("/area/"+areaId)
        .then((res)=>{
          if(res.data.code=200){
            this.loadArea();
            this.$message.success("删除成功");

          }else{
            this.$message.error("删除失败");
          }
        });
      },
      add(){
        this.$axios.post("/area",this.addForm)
        .then((res)=>{
          if(res.data.code==200){
            this.dialog.addshow=false;
            this.addForm="";  
            this.loadArea();
            this.$message.success("添加成功");
          }else{
            this.$message.error("添加失败");
          }
         
        });

      },
    //当每页显示条数改变时
    handleSizeChange(size) {      
      this.query.pageSize = size;
      this.loadArea();
    },
    //当页数改变时
    handleCurrentChange(currentPage) {     
      this.query.currentPage = currentPage;
      this.loadArea();
    },
    
     },

    mounted(){
      this.loadArea();
    }
  }
</script>
<style >
#backup1 {
  width: 100%;
  height:  100%;
}
.el-form--inline{
  line-height: 1;
  text-align: left;
}
.el-table{
  margin-top: 0px;
  line-height:1 ;
}
.el-pagination{
  text-align: right;
}

.el-descriptions-item__label.is-bordered-label {
  width: 160px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>